<template>
  <div class="customer-list">
    <span style="font-size: 30px; position: relative; top: -10px"
      >其他物品入库</span
    >
    <!-- 这里放置表格等内容 -->
    <div class="add-button-bottom-right">
      <el-button
        type="primary"
        icon="el-icon-loading"
        class="audit-button"
        @click="handleAudit"
        >审核</el-button
      >
    </div>

    <div style="display: flex; align-items: center">
      <el-input
        style="width: 300px; margin: 10px 20px 10px 0"
        v-model="searchKeyword"
        @change="getStorage"
        placeholder="请输入入库物品名称"
      ></el-input>
      <!-- 日期选择器 -->
      <el-button icon="el-icon-search" circle @change="getStorage"></el-button>
      <el-date-picker
        type="date"
        placeholder="选择日期"
        v-model="selectedDate"
        @change="getStorage"
      ></el-date-picker>
    </div>
    <el-table
      :data="StorageData"
      border
      class="centered-table"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55"></el-table-column>
      <!-- <el-table-column prop="ow_id" label="序号" width="auto"></el-table-column> -->
      <el-table-column
        prop="ow_item_name"
        label="入库物品名称"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="ow_specification"
        label="规格型号"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="ow_item_attributes"
        label="物品属性"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="ow_unit"
        label="单位"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="ow_quantity"
        label="入库数量"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="ow_warehouse"
        label="入库仓库名称"
        width="auto"
      ></el-table-column>

      <el-table-column prop="ow_type" label="入库类型" width="auto">
        <template slot-scope="scope">
          <span :style="{ color: '#37a3fe' }">{{ scope.row.ow_type }}</span>
        </template>
      </el-table-column>

      <el-table-column prop="ow_audit" label="审核状态" width="auto">
        <template slot-scope="scope">
          <span
            :style="{
              color: scope.row.ow_audit == true ? '#2ab600' : 'red',
            }"
          >
            {{ scope.row.ow_audit == true ? "已审核" : "未审核" }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        prop="ow_operators"
        label="操作人员"
        width="auto"
      ></el-table-column>
      <el-table-column
        prop="ow_storage_date"
        label="入库日期"
        :formatter="formatDate"
        width="auto"
      ></el-table-column>
    </el-table>
    <el-divider></el-divider>
    <!-- 下划线分隔 -->
    <!-- 分页 -->
    <el-pagination
      class="pagination"
      @size-change="change1"
      @current-change="Ymchange1"
      :current-page="currentPage1"
      :page-sizes="[10, 15, 20, 50]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="rows1"
    >
    </el-pagination>
  </div>
</template>

<script>
import $http from "@/routers/base";
import moment from "moment";

export default {
  data() {
    return {
      StorageData: [], //查询
      currentPage1: 1, //当前页
      pageSize: 10, //每页显示数
      rows1: 0, //总行数
      selectedDate: "",
      dateString: "",
      searchKeyword: "",
    };
  },
  methods: {
    //选中行
    handleSelectionChange(selection) {
      this.selectedRows = selection; // 更新选中的行
    },
    formatDate(row, column) {
      const date = new Date(row[column.property]);
      const year = date.getFullYear();
      const month = this.padZero(date.getMonth() + 1); // 月份是从0开始的，所以需要+1
      const day = this.padZero(date.getDate());
      return `${year}-${month}-${day}`;
    },
    padZero(num) {
      return num < 10 ? "0" + num : num;
    },

    //查询
    getStorage() {
      this.dateString = moment(this.selectedDate).format("YYYY-MM-DD");
      this.where = `1=1`;
      // 向后端请求数据，并更新客户数据和总条数
      if (this.selectedDate) {
        this.where += `AND (CAST(ow_storage_date AS DATE) ='${this.dateString}')`;
      }
      if (this.searchKeyword) {
        this.where += `AND (ow_item_name LIKE '%${this.searchKeyword}%' OR ow_specification LIKE '%${this.searchKeyword}%')`;
      }
      $http
        .get("InvStorage/GetFenYe", {
          params: {
            currentPage: this.currentPage1,
            pageSize: this.pageSize,
            where: this.where,
          },
        })
        .then((res) => {
          this.StorageData = res.storageData;
          this.rows1 = res.rows;
        })
        .catch((error) => {
          console.error("Error fetching client data: ", error);
        });
    },
    change1: function (size) {
      this.pageSize = size;
      this.currentPage1 = 1;
      this.getStorage();
    },
    Ymchange1: function (page) {
      this.currentPage1 = page;
      this.getStorage();
    },

    //审核
    handleAudit() {
      if (this.selectedRows.length === 0) {
        this.$message.warning("请至少选择一个销售订单进行审核");
        return;
      }
      const auditedRows = this.selectedRows.filter(
        (row) => row.ow_audit === true
      );
      if (auditedRows.length > 0) {
        this.$message.warning(
          "选中的销售订单中已有部分订单已经审核通过，不能再次审核"
        );
        return;
      }

      this.$confirm("此操作将审核选中的销售订单, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.selectedRows.forEach((row) => {
            this.auditSaleOrder(row.ow_id);
          });
          this.selectedRows = [];
          this.getStorage();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消审核",
          });
        });
    },
    //审核方法
    auditSaleOrder(ow_id) {
      $http
        .post(`InvStorage/AuditInv/${ow_id}`)
        .then((response) => {
          this.$message({
            message: response,
            type: "success",
          });
          this.getStorage();
        })
        .catch((error) => {
          this.$message.error("审核失败，请稍后再试");
          console.error("Audit error:", error);
        });
    },
  },
  mounted() {
    this.getStorage();
  },
};
</script>

<style>
/*表格单元格中的文本内容都将水平居中显示*/
.centered-table .el-table__cell {
  text-align: center;
}
/*表格标题背景变色*/
.centered-table .el-table__header th {
  background-color: #eeeeee; /* 设置标题行的背景色 */
  color: #333; /* 设置标题行的文字颜色 */
}

.customer-list {
  background-color: #ffffff;
  padding: 20px;
}

/*按钮的样式*/
.add-button {
  background-color: #4fc1b0;
  color: #ffffff;
}

.pagination {
  text-align: center;
  margin-top: 20px;
}

.add-button-bottom-right {
  position: absolute;
  bottom: 0;
  top: 110px; /* 将按钮相对于父容器顶部定位 */
  right: 100px;
  margin: 20px; /* 调整按钮与分割线的距离 */
}
.pagination-info {
  margin-bottom: 10px;
  text-align: right; /* 将当前显示条数等信息向右对齐 */
}
/* 调整对话框样式 */
.el-dialog__body {
  padding: 0px 10px 20px 10px; /* 调整内边距 */
}
/* 模态框 */

.ee {
  border-color: #4fc1b0;
}
</style>
